<template>
  <div data-v-shouye ref="shouye" class="shouye" @scroll="onScroll">
    <div class="hot-box">
      <div class="hot-box-left">
        <!-- 走马灯 -->
        <div v-if="showHotVideo" class="carousel">
          <div class="carousel-container">
            <div
              class="carousel-item"
              v-for="(item, index) in hotVideoList"
              :key="item.id"
              ref="campus"
              :class="[
                activeIndex == index
                  ? 'isCampusActive'
                  : oldActiveIndex == index
                  ? 'isOldCampus'
                  : '',
              ]"
            >
              <div class="carousel-inner">
                <img
                  :src="
                    item.cover + '?x-oss-process=image/format,webp/quality,Q_80'
                  "
                  alt=""
                  @click="toVideoDetails(item.id)"
                />
                <span v-if="index < 9">{{ "0" + (index + 1) }}</span>
                <span v-else>{{ index + 1 }}</span>
                <div class="title-box">
                  <h3>{{ item.title }}</h3>
                </div>
              </div>
            </div>
          </div>
          <ul class="carousel-indicators">
            <li
              v-for="(item, index) in hotVideoList"
              :key="item.id"
              ref="indicator"
              class="carousel-indicator"
              :class="[activeIndex == index ? 'isIndicatorActive' : '']"
              @click="changeCampus(index)"
            >
              <span class="carousel-btn"></span>
            </li>
          </ul>
          <span
            class="carousel-btn carousel-btn-left iconfont icon-arrow-left"
            @click="toPrev"
          ></span>
          <span
            class="carousel-btn carousel-btn-right iconfont icon-arrow-right"
            @click="toNext"
          ></span>
        </div>
        <div v-else class="carousel">
          <img
            src="../../assets/img/loading.png"
            alt=""
            style="width: 100%; height: 100%"
          />
        </div>
      </div>
      <div class="hot-box-right">
        <h2 class="iconfont icon-the_bestr_full">排行榜</h2>
        <div class="bestr-list">
          <div
            v-for="(item, index) in hotVideoList"
            :key="item.id"
            @click="toVideoDetails(item.id)"
            class="bestr-item"
          >
            <i>{{ (index + 1).toString().padStart(2, "0") }}</i>
            <span>{{ item.title }}</span>
          </div>
        </div>
      </div>
    </div>

    <!-- 音乐分区 -->
    <div class="list">
      <div class="list-top">
        <h2>音乐</h2>

        <span>
          <i class="iconfont icon-exchangerate" @click="flashVideo(0)"
            >换一换</i
          >
          <i class="iconfont" @click="toVideoZone('/music')">查看更多</i>
        </span>
      </div>
      <div class="list-body">
        <VideoCart
          ref="videobox"
          v-for="item in musicZone"
          :key="item.id"
          :videoObj="{ src: item.cover, date: item.upload_date, ...item }"
          :isShow="false"
          width="16vw"
          height="10vw"
        >
        </VideoCart>
      </div>
    </div>

    <!-- 游戏分区 -->
    <div class="list">
      <div class="list-top">
        <h2>游戏</h2>
        <span>
          <i class="iconfont icon-exchangerate" @click="flashVideo(1)"
            >换一换</i
          >
          <i class="iconfont" @click="toVideoZone('/game')">查看更多</i>
        </span>
      </div>
      <div class="list-body">
        <VideoCart
          ref="videobox"
          v-for="item in gameZone"
          :key="item.id"
          :videoObj="{ src: item.cover, date: item.upload_date, ...item }"
          :isShow="false"
          width="16vw"
          height="10vw"
        >
        </VideoCart>
      </div>
    </div>

    <!-- 动漫 -->
    <div class="list">
      <div class="list-top">
        <h2>动漫</h2>
        <span>
          <i class="iconfont icon-exchangerate" @click="flashVideo(2)"
            >换一换</i
          >
          <i class="iconfont" @click="toVideoZone('/comic')">查看更多</i>
        </span>
      </div>
      <div class="list-body">
        <VideoCart
          ref="videobox"
          v-for="item in animeZone"
          :key="item.id"
          :videoObj="{ src: item.cover, date: item.upload_date, ...item }"
          :isShow="false"
          width="16vw"
          height="10vw"
        >
        </VideoCart>
      </div>
    </div>

    <!-- 生活分区 -->
    <div class="list">
      <div class="list-top">
        <h2>生活</h2>
        <span>
          <i class="iconfont icon-exchangerate" @click="flashVideo(3)"
            >换一换</i
          >
          <i class="iconfont" @click="toVideoZone('/foods')">查看更多</i>
        </span>
      </div>
      <div class="list-body">
        <VideoCart
          ref="videobox"
          v-for="item in foodZone"
          :key="item.id"
          :videoObj="{ src: item.cover, date: item.upload_date, ...item }"
          :isShow="false"
          width="16vw"
          height="10vw"
        >
        </VideoCart>
      </div>
    </div>
  </div>
</template>

<script>
import VideoCart from "@/components/VideoCart";
import debounce from "@/debounce.js";
import setShowStatus from "@/utils/setShowStatus";

export default {
  name: "Home",
  components: {
    VideoCart,
  },
  data: function () {
    return {
      hotVideoList: [],
      musicZone: [],
      gameZone: [],
      animeZone: [],
      foodZone: [],

      activeIndex: 0,
      oldActiveIndex: 0,

      showHotVideo: false,
    };
  },

  created() {
    this.getVideoZone();
  },

  methods: {
    getVideo(index, callback) {
      this.axios
        .get(`/getVideoZone/${index}`)
        .then((response) => {
          if (response.data.status === 200) {
            callback(response.data.data);
          } else {
            console.log(response);
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },

    getHotVideo() {
      this.axios
        .get(`/getHotVideo`)
        .then((response) => {
          if (response.data.status === 200) {
            // console.log(response.data);
            this.hotVideoList = response.data.data.slice(0, 10);

            this.showHotVideo = true;
          } else {
            console.log(response);
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },

    getVideoZone() {
      // 获取点赞最多的视频
      this.getHotVideo();

      // 0:音乐分区
      this.getVideo(0, (data) => {
        this.musicZone = data;

        this.$nextTick(() => {
          this.init();
        });
      });

      // 0:游戏分区
      this.getVideo(1, (data) => {
        this.gameZone = data;

        this.$nextTick(() => {
          this.init();
        });
      });

      // 0:动漫分区
      this.getVideo(2, (data) => {
        this.animeZone = data;

        this.$nextTick(() => {
          this.init();
        });
      });

      // 0:美食分区
      this.getVideo(3, (data) => {
        this.foodZone = data;

        this.$nextTick(() => {
          this.init();
        });
      });
    },

    // 刷新视频
    flashVideo(index) {
      this.getVideo(index, (data) => {
        if (index === 0) {
          this.musicZone = data;
        } else if (index == 1) {
          this.gameZone = data;
        } else if (index == 2) {
          this.animeZone = data;
        } else if (index == 3) {
          this.foodZone = data;
        } else {
          return;
        }

        this.$nextTick(() => {
          setTimeout(() => {
            let scrollTop = this.$refs["shouye"].scrollTop;
            let winTop = window.innerHeight;
            setShowStatus.call(this, scrollTop, winTop);
          }, 300);
        });

        // console.log(this.musicZone);
      });
    },

    toVideoDetails(id) {
      const res = this.$router.resolve(`/video/${id}`);
      window.open(res.href, "_blank");
    },

    toHomePage(id) {
      const res = this.$router.resolve(`/homepage/${id}`);
      window.open(res.href, "_blank");
    },

    toVideoZone(path) {
      if (path == "" || !path) {
        return;
      }

      this.$router.push(path);
    },

    changeCampus(index) {
      // 记录上一次点击的 index
      this.oldActiveIndex = this.activeIndex;
      // 记录当前点击的 index
      this.activeIndex = index;

      if (this.oldActiveIndex == this.activeIndex) {
        return;
      }

      // console.log(this.$refs.campus[this.oldActiveIndex]);

      if (this.oldActiveIndex < this.activeIndex) {
        this.$refs.campus[this.oldActiveIndex].style.transform =
          "translateX(-100%)";
        this.$refs.campus[this.activeIndex].style.transform = "translateX(0)";
      } else if (this.oldActiveIndex > this.activeIndex) {
        this.$refs.campus[this.oldActiveIndex].style.transform =
          "translateX(100%)";
        this.$refs.campus[this.activeIndex].style.transform = "translateX(0)";
      }

      // console.log(this.$refs.campus[this.oldActiveIndex].style);

      // console.log(this.oldActiveIndex, this.activeIndex);
    },

    toPrev() {
      if (this.activeIndex == 0) {
        this.changeCampus(this.hotVideoList.length - 1);
      } else {
        this.changeCampus(this.activeIndex - 1);
      }
    },

    toNext() {
      if (this.activeIndex == this.hotVideoList.length - 1) {
        this.changeCampus(0);
      } else {
        this.changeCampus(this.activeIndex + 1);
      }
    },

    onScroll: debounce(function (event) {
      // window.innerHeight：浏览器可视区域高度
      // document.body.scrollTop || document.documentElement.scrollTop：浏览器滚动条滚过高度
      // img.offsetTop：元素距文档顶部的高度
      let scrollTop = event.target.scrollTop;
      let winTop = window.innerHeight;
      setShowStatus.call(this, scrollTop, winTop);
    }, 500),

    init() {
      let scrollTop = 0;
      let winTop = window.innerHeight;
      setShowStatus.call(this, scrollTop, winTop);
    },
  },
};
</script>

<style lang="scss">
</style>

<style lang="scss" scoped>
.shouye[data-v-shouye] {
  width: 100%;
  height: 100%;
  padding: 10px;
  user-select: none;
  overflow: scroll;
  &::-webkit-scrollbar {
    display: none;
  }

  .hot-box {
    display: flex;
    justify-content: space-between;
    width: 100%;
    height: 86vh;

    .hot-box-left {
      flex: 1;
      width: 152vh;
      height: 100%;
      margin-right: 20px;
      background-color: #fff;
      border: 6px solid #fff;
      border-radius: 8px;
      box-shadow: 0 2px 4px 0 rgb(0 0 0 / 8%);

      .carousel {
        position: relative;
        width: 100%;
        height: 100%;

        .carousel-container {
          position: relative;
          width: 100%;
          height: 100%;

          overflow: hidden;

          .carousel-item {
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            z-index: -1;
            opacity: 0;
            transform: translateX(0);

            .carousel-inner {
              position: relative;
              width: 100%;
              height: 100%;

              img {
                position: absolute;
                left: 0;
                top: 0;
                width: 100%;
                height: 100%;
                object-fit: cover;
                border-radius: 8px;
                cursor: pointer;
              }

              span {
                position: absolute;
                left: 10px;
                top: 60%;
                letter-spacing: 0.31rem;
                font-size: 50px;
                color: #e3e3e3;
                font-weight: 700;
                z-index: 100;
              }

              & > .title-box {
                position: absolute;
                left: 10px;
                top: 70%;
                max-width: 40%;
                font-size: 24px;
                color: #e3e3e3;
                padding: 0.94rem;
                background-color: rgba(255, 255, 255, 0.08);
                -webkit-backdrop-filter: blur(12px);
                backdrop-filter: blur(12px);
                z-index: 100;

                h3 {
                  display: -webkit-box;
                  -webkit-box-orient: vertical;
                  text-overflow: -o-ellipsis-lastline;
                  text-overflow: ellipsis;
                  -webkit-line-clamp: 2;
                  overflow: hidden;
                }
              }
            }
          }

          .isCampusActive {
            z-index: 10;
            opacity: 1;
            transition: opacity 1.5s ease-in-out;
            -webkit-transition: opacity 0.2s ease-in-out;
          }

          .isOldCampus {
            z-index: 20;
            opacity: 0;
            // transform: translateX(-120px);
            transition: transform 1.5s ease-out, opacity 1.5s ease-in-out;
            -webkit-transition: transform 1s ease-out, opacity 0.3s ease-in-out;
          }
        }

        .carousel-indicators {
          display: flex;
          position: absolute;
          left: 50%;
          bottom: 30px;
          // width: 100%;
          padding: 5px;
          transform: translateX(-50%);
          z-index: 1000;

          .carousel-indicator {
            width: 50px;
            height: 10px;
            margin: 0 10px;
            // background-color: #0000002d;
            background-color: rgba(255, 255, 255, 0.08);
            -webkit-backdrop-filter: blur(12px);
            backdrop-filter: blur(12px);
            cursor: pointer;

            transition: background-color 0.5s linear;
            -webkit-transition: background-color 0.5s linear; /* Safari */
          }

          .isIndicatorActive {
            background-color: #fff;
          }

          .carousel-indicator:hover {
            background-color: #fff;
          }
        }

        .carousel-btn {
          position: absolute;
          top: 50%;
          transform: translateY(-50%);
          font-size: 5rem;
          color: #666666;
          z-index: 1000;
          cursor: pointer;
          transition: all 0.4s;
          -webkit-transition: all 0.4s;
        }

        .carousel-btn:hover {
          font-size: 5.6rem;
          color: #e3e3e3;
        }

        .carousel-btn-left {
          left: 10px;
        }

        .carousel-btn-right {
          right: 10px;
        }
      }
    }

    .hot-box-right {
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      width: 40vh;
      height: 100%;
      padding: 0 10px;
      background-color: #fff;

      h2 {
        display: flex;
        align-items: center;
        height: 10%;
        padding: 20px 0;
        font-size: 2.2vh;
        font-weight: 700;
        border-bottom: #e3e3e3 solid 1px;
      }

      h2::before {
        margin-right: 10px;
        color: orange;
      }

      .bestr-list {
        height: 90%;

        .bestr-item {
          display: flex;
          align-items: center;
          height: 10%;
          border-bottom: 1px solid #e3e3e3;
          cursor: pointer;

          i {
            margin-right: 1vh;
            font-size: 1.8vh;
            font-style: normal;
          }

          span {
            display: -webkit-box;
            font-size: 1.8vh;

            overflow: hidden;
            -webkit-box-orient: vertical;
            text-overflow: -o-ellipsis-lastline;
            text-overflow: ellipsis;
            -webkit-line-clamp: 1;
          }

          &:hover {
            color: #00aeec;
          }
        }
      }
    }
  }

  .list {
    width: 100%;
    margin-top: 20px;

    .list-top {
      position: relative;
      width: 100%;
      height: 40px;

      h2 {
        position: absolute;
        left: 0;
        top: 0;
        padding-left: 5px;
        font-size: 22px;
        font-weight: 700;
        border-left: 5px solid orangered;
      }

      span {
        position: absolute;
        right: 10px;
        top: 5px;
        margin: 0 10px;
        font-size: 16px;

        i {
          padding: 8px 10px;
          margin: 0 8px;
          background-color: #fff;
          border: 1px solid #ddd;
          border-radius: 6px;
          cursor: pointer;

          transition: background-color 0.5s;
        }

        i:hover {
          background-color: #eee;
        }

        i::before {
          margin-right: 5px;
        }
      }
    }

    .list-body {
      display: flex;
      justify-content: space-between;
      width: 100%;
      padding: 10px 0;

      // .list-item {
      //   width: 380px;
      //   margin-right: 15px;
      //   background-color: #fff;
      //   border-radius: 8px;

      //   .item-top {
      //     width: 100%;
      //     height: 220px;

      //     a {
      //       display: block;
      //       height: 100%;
      //       overflow: hidden;
      //       border-radius: 8px;

      //       img {
      //         display: block;
      //         width: 100%;
      //         height: 100%;
      //         object-fit: contain;
      //         border-radius: 8px;
      //         cursor: pointer;

      //         transition: transform 0.3s;
      //       }

      //       &:hover {
      //         img {
      //           transform: scale(1.03);
      //         }
      //       }
      //     }
      //   }

      //   .item-bottom {
      //     display: flex;
      //     flex-direction: column;
      //     justify-content: space-between;
      //     width: 100%;
      //     height: 85px;
      //     padding: 0.5em;

      //     h2 {
      //       display: -webkit-box;
      //       padding: 2px;
      //       font-size: 16px;
      //       font-weight: 400;
      //       letter-spacing: 2px;
      //       -webkit-box-orient: vertical;
      //       text-overflow: -o-ellipsis-lastline;
      //       text-overflow: ellipsis;
      //       -webkit-line-clamp: 2;
      //       overflow: hidden;
      //     }

      //     span {
      //       display: inline-block;
      //       font-size: 14px;
      //       color: rgb(140, 140, 140);
      //       a {
      //         cursor: pointer;
      //       }

      //       a:hover {
      //         color: #00aeec;
      //       }

      //       i::before {
      //         margin-left: 20px;
      //         margin-right: 6px;
      //       }
      //     }
      //   }
      // }
    }
  }
}
</style>